<template>
    <div class="card">
      <el-table :data="state.tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all :span-method="arraySpanMethod">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" align="center" width="70" :index="indexMethod" />
        <el-table-column prop="BillCode" label="账单编号" align="center" width="180" />
        <el-table-column prop="ResourceDesc" label="资源名称" align="center" width="180" />
        <el-table-column prop="BillTitle" label="账单名称" align="center" width="180" />
        <el-table-column prop="BillFee" label="账单费用" align="center" width="180" />
        <el-table-column prop="FloorArea" label="建筑面积" align="center" width="180" />
        <el-table-column prop="ResourceType" label="资源类型" align="center" width="180" />
        <el-table-column prop="StartDate" label="开始日期" align="center" width="180" />
        <el-table-column prop="EndDate" label="结束日期" align="center" width="180" />
      </el-table>
    </div>
  </template>
<script setup lang="ts" name="systemTable">
// import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
// import { ElMessageBox, ElMessage } from 'element-plus';
const state = reactive({
tableData: [
    {
        "Children": [
            {
                "BillID": "106640136730075EA4EBC5856919564C",
                "BillCode": "BILL2023101700278",
                "BillTitle": "测试规则",
                "ResourceID": "1064563225520182A3DC4A8C4AF01D1B",
                "StartDate": "2022-10-01",
                "EndDate": "2023-09-30",
                "BillFee": 300.45,
                "BillStatus": 0,
                "ResourceDesc": "1栋第1单元第1层1-1-101",
                "ResourceType": 0,
                "FloorArea": 100.15,
                "parentId":"1"
            },
            {
                "BillID": "1066401367300077A0D230225CCB7279",
                "BillCode": "BILL2023101700279",
                "BillTitle": "测试规则",
                "ResourceID": "1064563225520182A3DC4A8C4AF01D1B",
                "StartDate": "2023-10-01         ",
                "EndDate": "2024-09-30         ",
                "BillFee": 300.45,
                "BillStatus": 0,
                "ResourceDesc": "1栋第1单元第1层1-1-101",
                "ResourceType": 0,
                "FloorArea": 100.15,
                "parentId":"1"
            }
        ],
        "BillID": "1",
        "BillCode": "",
        "BillTitle": "测试规则",
        "ResourceID": "1064563225520182A3DC4A8C4AF01D1B",
        "StartDate": "2022-10-01         ",
        "EndDate": "2024-09-30         ",
        "BillFee": 600.9,
        "BillStatus": 1,
        "ResourceDesc": "1栋第1单元第1层1-1-101~minPropertyServer.Models.BillModel",
        "ResourceType": 0,
        "FloorArea": 100.15,
        "parentId":"0"
    }
],
treeArr: [],
});
// 页面加载时
onMounted(() => {
	getTableData();
});
    const getTableData=()=> {
      // 树数组转扁平数组，用于indexMethod方法中自定义表格索引
      this.treeArr = this.treeToArray(this.tableData)
      // 只有没有子元素的行才有索引
      let index = 1
      for (const item of this.treeArr) {
        if (item.children && item.children.length) continue
        item.index = index
        index++
      }
      // 设置合并行的显示内容
      // 合并行显示文本为第二个key值，因为后端数据只是二级树，所以只处理了数据的第一级，想要显示的key值文本设置到第二个key值即可
      for (const item of this.tableData) {
        item.date = item.name
        // item.date = item.hello
      }
    };
      /** 自定义表格的索引,只有没有子元素的行才有索引 */
     const indexMethod=(index)=> {
        return this.treeArr[index].index ? this.treeArr[index].index : ""
      };
      /** 合并表格行 */
      const arraySpanMethod=({ row, column, rowIndex, columnIndex }) => {
        // 有子元素的行合并成一行
        if (row.children && row.children.length) {
          // 这个2是固定的，必须2的情况才能正常显示展开收起图标，这个是element-plus源码实现的问题，改不了
          if (columnIndex === 2) {
            // 获取一行表格的所有字段
            const keys = Object.keys(row)
            // 需要过滤掉children和id字段，列数+2，因为有选择框和序号的列数
            const columns = keys.filter(item => item !== "Children" && item !== "BillID").length + 2
            return [0, columns]
          } else {
            return [0, 0]
          }
        }
      };
      /** 扁平数组转树结构数组，这里暂时用不上，可以用来处理后端传扁平数组的情况 */
      const arrayToTree=(arr)=> {
        const result = []
        const itemMap = {}
        for (const item of arr) {
          const ID = item.ID
          const PARENTID = item.PARENTID
          if (!itemMap[ID]) {
            itemMap[ID] = {
              children: [],
            }
          }
          itemMap[ID] = {
            ...item,
            children: itemMap[ID]["children"],
          }
          const treeItem = itemMap[ID]
          if (PARENTID === "-1") {
            result.push(treeItem)
          } else {
            if (!itemMap[PARENTID]) {
              itemMap[PARENTID] = {
                children: [],
              }
            }
            itemMap[PARENTID].children.push(treeItem)
          }
        }
        return result
      };
      /** 树结构数组转扁平数组 */
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const treeToArray=(tree)=> {
        const arr = []
        function recursiveFunction(tree) {
          for (let i = 0; i < tree.length; i++) {
            arr.push(tree[i])
            if (tree[i].children && tree[i].children.length) {
              recursiveFunction(tree[i].children)
            }
          }
        }
        recursiveFunction(tree)
        return arr
      };
  </script>
  <style scoped lang="scss">
  /* 设置表头背景色 */
  :deep(.header) {
    background-color: #eef5f5 !important;
  }
  :deep(.el-table) {
    /* 解决索引不居中的问题 
    .cell {
      @include flex;
      padding: 5px 0px;
    }*/
  
    .el-table__placeholder {
      display: none;
    }
  
    .is-center {
      .cell {
        justify-content: center;
      }
    }
  
    .is-left {
      .cell {
        padding-left: 30px;
      }
    }
  
    .el-table__row--level-0 {
      .cell {
        justify-content: flex-start;
        /* prettier-ignore */
        padding-left: 20PX;
      }
    }
  
    /* 替换默认展开收起图片 */
    .el-table__expand-icon {
      width: 16px;
      height: 16px;
      background: url("~@assets/imgs/tree/8.png") no-repeat;
      background-size: 100% 100%;
  
      .el-icon {
        display: none;
      }
    }
    .el-table__expand-icon--expanded {
      transform: none;
      background: url("~@assets/imgs/tree/9.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  </style>
  
  